<template>
    <div class="tableData">
        <el-table :border="border" :data="tableData" v-loading="tableLoading" :header-cell-style="headerStyle"
            :cell-style="cellStyle">
            <el-table-column v-for="(column, index) in tableColumn" :fixed="column.fixed" :key="index" :label="column.label"
                :align="column.align ? column.align : 'center'" show-overflow-tooltip :min-width="`${column.minWidth}`">
                <template slot-scope="scope">
                    <template v-if="column.slot">
                        <el-button v-for="(action, index) in column.actions" :key="index"
                            :type="action.type ? action.type : 'primary'" :size="action.size ? action.size : 'mini'"
                            @click="$emit(action.click, scope.row)">
                            {{ action.label }}
                        </el-button>
                    </template>
                    <template v-else-if="column.type === 'index'">
                        <span>{{ scope.$index + 1 }}</span>
                    </template>
                    <template v-else-if="column.type === 'el-image'">
                        <div class="image-container">
                            <el-image class="image" v-if="scope.row[column.prop]" :src="scope.row[column.prop]"
                                fit="contain" />
                            <span v-else>暂无图片</span>
                        </div>
                    </template>
                    <template v-else-if="column.formater">
                        <span>{{ column.formater(scope.row) }}</span>
                    </template>
                    <template v-else>
                        <span>{{ scope.row[column.prop] }}</span>
                    </template>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                :page-sizes="pageSizes" :page-size="pageSize" :layout="layout" :total="total" />
        </div>
    </div>
</template>

<script>
export default {
    name: 'table-view',
    props: {
        // 表格数据
        tableData: {
            type: Array,
            default: () => [],
        },
        // 表头
        tableColumn: {
            type: Array,
            default: () => [],
        },
        // 总条数
        total: {
            type: Number,
            default: 0,
        },
        pageSizes: {
            type: Array,
            default: () => [10, 20, 30, 50],
        },
        layout: {
            type: String,
            default: 'total, sizes, prev, pager, next, jumper',
        },
        // 表单 分页参数
        pageNum: {
            type: Number,
            default: 1,
        },
        pageSize: {
            type: Number,
            default: 10,
        },
        // 是否显示边框
        border: {
            type: Boolean,
            default: true,
        },
        // 表头样式
        headerStyle: {
            type: Object,
            default: () => { },
        },
        // 单元格样式
        cellStyle: {
            type: Object,
            default: () => { },
        },
        // 表格加载状态
        tableLoading: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        handleSizeChange(pageSize) {
            this.$emit('update:pageSize', pageSize)
            this.$emit('getList')
        },
        handleCurrentChange(pageNum) {
            this.$emit('update:pageNum', pageNum)
            this.$emit('getList')
        },
    },
}
</script>

<style lang="scss" scoped>
.pagination {
    text-align: right;
    margin-top: 10px;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;

    .image {
        margin: auto;
        height: 60px;
    }
}
</style>